<template>
  <div class="app-container">
    <div style="padding: 20px">
      <el-button type="primary" @click="addFormVisible = true" size="small">添加</el-button>
    </div>

    <div>
      <el-table v-loading="tableLoading"
                :data="tableData"
                height="600"
                row-key="id"
                ref="table"
                :tree-props="{children: 'children',hasChildren:'hasChildren'}"
                border
      >
        <el-table-column label="资源名称" prop="name">
          <template slot-scope="scope">
            <div  :style="scope.row.status!=1?{textDecoration: 'line-through',color:'red'}:{}">
              {{scope.row.name}}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="组件路径" prop="component"></el-table-column>
        <el-table-column label="icon" width="50" prop="icon">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column label="权限值" prop="permValue"></el-table-column>
        <el-table-column label="权限策略" width="120" prop="authStrategy"></el-table-column>
        <el-table-column label="优先级" width="80" prop="priority"></el-table-column>
        <el-table-column label="状态" width="60" prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==1">正常</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="url" prop="url"></el-table-column>
        <el-table-column label="类型" width="80" prop="permissionType">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.permissionType==='MENU'">
              菜单
            </el-tag>
            <el-tag type="danger" v-else-if="scope.row.permissionType==='API'">
              接口
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="()=>{viewVisible=true;viewData = scope.row}">查看</el-button>
            <el-button size="small" type="text" @click="setEditData(scope.row)">编辑</el-button>
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              @confirm="remove(scope.row)"
              title="确定删除吗？"
            >
              <el-button size="small" slot="reference" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- form  -->
    <el-dialog destroy-on-close width="30%" title="添加" :visible.sync="addFormVisible"
               @close="()=>{this.resetForm('addForm')}"
    >
      <el-form ref="addForm" label-width="100" :rules="addRules" :model="addFormData">
        <el-form-item label="父级资源" prop="parentId">
          <TreeSelect class-name="selectMain" v-model="addFormData.parentId" :data-source="listMenu"/>
        </el-form-item>
        <el-form-item v-if="addFormData.permissionType=='MENU'" label="组件" prop="component">
          <el-input v-model="addFormData.component" size="small"/>
        </el-form-item>
        <el-form-item label="为菜单时的icon" v-if="addFormData.permissionType=='MENU'" prop="icon">
          <el-input v-model="addFormData.icon" size="small"/>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="addFormData.name" size="small"/>
        </el-form-item>
        <el-form-item label="权限值" prop="permValue">
          <el-input v-model="addFormData.permValue" size="small"/>
        </el-form-item>
        <el-form-item v-if="addFormData.permissionType==='API'" label="权限策略" prop="authStrategy">
          <el-input v-model="addFormData.authStrategy" size="small"/>
        </el-form-item>
        <el-form-item label="资源类型" prop="permissionType">
          <FormSelect v-model="addFormData.permissionType"
                      :options="[{label:'菜单',value:'MENU'},{label:'接口',value:'API'}]"
          />
        </el-form-item>
        <el-form-item v-if="addFormData.permissionType=='MENU'" label="优先级" prop="priority">
          <el-input v-model="addFormData.priority" type="number" size="small"/>
        </el-form-item>
        <el-form-item label="请求路径" prop="url">
          <el-input v-model="addFormData.url" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resetForm('addForm')">重置</el-button>
        <el-button type="primary" @click="createTPermission('addForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="editFormVisible"
               @close="()=>{this.resetForm('editForm')}"
    >
      <el-form ref="editForm" label-width="80" :rules="editRules" :model="editFormData">
        <el-form-item label="父级资源" prop="parentId">
          <TreeSelect :data-source="listMenu" v-model="editFormData.parentId"/>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="editFormData.name" size="small"/>
        </el-form-item>
        <el-form-item v-if="editFormData.permissionType=='MENU'" label="为菜单时的组件路径" prop="component">
          <el-input v-model="editFormData.component" size="small"/>
        </el-form-item>
        <el-form-item label="为菜单时的icon" v-if="addFormData.permissionType=='MENU'" prop="icon">
          <el-input v-model="editFormData.icon" size="small"/>
        </el-form-item>
        <el-form-item label="权限值" prop="permValue">
          <el-input v-model="editFormData.permValue" size="small"/>
        </el-form-item>
        <el-form-item v-if="editFormData.permissionType==='API'" label="权限策略" prop="authStrategy">
          <el-input v-model="editFormData.authStrategy" size="small"/>
        </el-form-item>
        <el-form-item label="资源类型" prop="permissionType">
          <FormSelect v-model="editFormData.permissionType"
                      :options="[{label:'菜单',value:'MENU'},{label:'接口',value:'API'}]"
          />
        </el-form-item>
        <el-form-item v-if="editFormData.permissionType=='MENU'" label="优先级" prop="priority">
          <el-input v-model="editFormData.priority" type="number" size="small"/>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <FormSelect v-model="editFormData.status" :options="[{label:'正常',value:1},{label:'禁用',value:0}]"/>
        </el-form-item>
        <el-form-item label="路径" prop="url">
          <el-input v-model="editFormData.url" size="small"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="resetForm('editForm')">重置</el-button>
        <el-button type="primary" @click="updateTPermission('editForm')">确 定</el-button>
      </div>
    </el-dialog>


    <!--view-->
    <el-dialog :visible.sync="viewVisible" footer="">
      <el-descriptions border title="查看">
        <el-descriptions-item label="父级id">{{ viewData.id }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ viewData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ viewData.updateTime }}</el-descriptions-item>
        <el-descriptions-item label="为菜单时的组件路径">{{ viewData.component }}</el-descriptions-item>
        <el-descriptions-item label="为菜单时的icon">{{ viewData.icon }}</el-descriptions-item>
        <el-descriptions-item label="名称">{{ viewData.name }}</el-descriptions-item>
        <el-descriptions-item label="父级id">{{ viewData.parentId }}</el-descriptions-item>
        <el-descriptions-item label="权限值">{{ viewData.permValue }}</el-descriptions-item>
        <el-descriptions-item label="权限值">{{ viewData.authStrategy }}</el-descriptions-item>
        <el-descriptions-item label="类型">{{ viewData.permissionType }}</el-descriptions-item>
        <el-descriptions-item label="优先级">{{ viewData.priority }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{ viewData.status }}</el-descriptions-item>
        <el-descriptions-item label="前端路由或后端rest">{{ viewData.url }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script>
import { allPermission, create, update, removeById } from '@/api/system/tPermission'
import { formMixin } from '@/mixins/mixins'
import FormSelect from '@/components/FormComponent/FormSelect'
import TreeSelect from '@/components/TreeSelect'

export default {
  name: 'TPermission',
  components: { TreeSelect, FormSelect },
  mixins: [formMixin],
  data() {
    return {
      tableLoading: false,
      tableData: [],
      addFormVisible: false,
      editFormVisible: false,
      viewVisible: false,
      viewData: {
        id: '',
        createTime: '',
        updateTime: '',
        authStrategy:'',
        component: '',
        icon: '',
        name: '',
        parentId: '',
        permValue: '',
        permissionType: '',
        priority: '',
        status: '',
        url: ''
      },
      addFormData: {
        authStrategy:'AUTHENTICATED',
        component: '',
        icon: '',
        name: '',
        parentId: '',
        permValue: '',
        permissionType: '',
        priority: '',
        url: ''
      },
      editFormData: {
        authStrategy:'',
        id: '',
        component: '',
        icon: '',
        name: '',
        parentId: '',
        permValue: '',
        permissionType: '',
        priority: '',
        status: '',
        url: ''
      },
      addRules: {
        name: [{ required: true }],
        permValue: [{ required: true }],
        permissionType: [{ required: true }],
        url: [{ required: true }]
      },
      editRules: {
        name: [{ required: true }],
        permValue: [{ required: true }],
        permissionType: [{ required: true }],
        url: [{ required: true }]
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    listMenu: allPermission,
    getList() {
      this.tableLoading = true
      allPermission().then(res => {
        this.tableData = res.data
        this.tableLoading = false
      })
    },
    setEditData(row) {
      Object.keys(this.editFormData).forEach(key => {
        this.editFormData[key] = row[key]
      })
      this.editFormVisible = true
    },
    updateTPermission(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update(this.editFormData).then(res => {
            this.$notify['success']({
              title: res.message
            })
            this.getList()
            this.editFormVisible = false
          })
        }
      })

    },
    createTPermission(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          create(this.addFormData).then(res => {
            this.$notify['success']({
              title: res.message
            })
            this.getList()
            this.addFormVisible = false
          })
        }
      })
    },
    remove(row) {
      removeById(row.id).then(res => {
        this.$notify['success']({
          title: res.message
        })
        this.getList()
      })

    }

  }
}
</script>

<style scoped>

</style>
